<template>
    <LayoutWrap id="wechat">
        <ul class="list-head">
            <li class="list-head-item">
                <ExcelUpload
                    :key="uploadKey"
                    :on-error="handleError"
                    :on-success="handleSuccess"
                    :validSheetCell="['A1', '微信支付账单明细']"
                    :sheetrange="[17, 0]"
                    type="primary"
                    ><i class="el-icon-upload2"></i> 批量导入微信支付账单明细</ExcelUpload
                >
            </li>
            <li class="list-head-item">
                <ExcelUpload type="default"
                    ><i class="el-icon-download"></i> 批量导入微信支付账单明细模板下载</ExcelUpload
                >
            </li>
        </ul>
        <ul class="list-head">
            <li class="list-head-item">
                <CheckedColumns
                    :checkedId="checkedId"
                    :dataSource="checkedOpts"
                    v-model="checkedValues"
                ></CheckedColumns>
            </li>
        </ul>
        <el-table :data="tableData" border>
            <el-table-column key="selection" type="selection" width="45"> </el-table-column>
            <template v-for="item in columnData">
                <el-table-column
                    v-if="checkedValues.includes(item.prop)"
                    :key="item.key"
                    :prop="item.prop"
                    :label="item.label"
                ></el-table-column>
            </template>
        </el-table>
        <Pagination
            :page-size.sync="formSearch.pageSize"
            :page.sync="formSearch.page"
            :total="formSearch.count"
            @change="onChangePage"
        />
    </LayoutWrap>
</template>
<script>
import {mapGetters} from 'vuex';
import ExcelUpload from '@/components/ExcelUpload/index';
import CheckedColumns from '@/components/CheckedColumns';
import {THE_CHECKED_WECHAT} from '@/utils/list-types';
import getObjKeys from '@/views/account/wechat/getObjKeys';
import getCheckedColumns from '@/views/account/getCheckedColumns';

export default {
    name: 'wechat',
    components: {
        ExcelUpload,
        CheckedColumns
    },
    data() {
        return {
            uploadKey: 'wechat',
            objKeys: getObjKeys(),
            tableData: [],
            columnData: [],
            checkedValues: [
                'TransactionHour',
                'TransactionType',
                'Counterparty',
                'Commodity',
                'IncomeOrExpenditure',
                'Amount',
                'PaymentMethod',
                'CurrentState',
                'TransactionNumber',
                'MerchantOrderNumber',
                'Remarks'
            ], // 默认选中的
            checkedOpts: getCheckedColumns(getObjKeys()), // 需要选择的数据[{}, {label: '', value: ''}]
            checkedId: THE_CHECKED_WECHAT,
            formSearch: {
                fromMoney: '',
                fromStatus: '',
                fromMode: [],
                daterange: [],
                fromName: '',
                fromAccount: '',
                fromType: '',
                count: 0, // 总条数
                pageSize: 10, // 一页多少条
                page: 1 // 当前第几页
            }
        };
    },
    created() {
        console.log('this.checkedOpts', this.checkedOpts);
        const newObj = this.objKeys;

        this.columnData = Object.keys(newObj).map(item => ({key: newObj[item], prop: newObj[item], label: item}));
        console.log('this.columnData', this.columnData);
    },
    methods: {
        onChangePage(value) {
            this.formSearch = {...this.formSearch, ...value};
            this.getList();
        },
        getList() {
            console.log('getList');
        },
        handleError(error) {
            console.log('error', error);
            this.$message({message: error, type: 'error'});
        },
        handleSuccess({results, header}) {
            this.uploadKey = Math.random();
            const newObj = this.objKeys;

            this.tableData = results.map(item => {
                const newChild = {};
                Object.keys(item).forEach(child => {
                    newChild[newObj[child]] = item[child];
                });
                return newChild;
            });
        }
    }
};
</script>
